@charset "UTF-8";

* {
  margin: 0px;
  padding: 0px;
  list-style: none;
  text-decoration: none;
}
section{
	width: 1300px;
	position: relative;
	top:10px;
	left: 50%;
	transform: translateX(-50%); /* 水平移动和垂直移动到中心 */
}
.div_a1{
	width: 1300px;
  	float:left;
	position: relative;
}
.div_left{
	float:left;
	width: 300px;
	color:grey;
	position: relative;
	top:0px;
	
}
.ul_left>li{
	background-color: #fff;
	width: 300px;
	height: 124px;
	clear: left;
	line-height: 110px;
	text-align: center;
	border-bottom: 1px solid #ccc;
	font-weight: bold;
}
.ul_left>li:first-of-type:hover .dog_div{
	display: block;
}
.ul_left a{
	color:grey;
}
.dog_div{
	width: 620px;
	height: 337.5px;
	background-color: #fff;
	position: absolute;
	top: 0px;
	left: 300px;
	z-index: 3;
	display: none;
	box-shadow: 0px 0px 3px 1px #999;
}
.dog_div>ul{
	width: 580px;
	height: 92.5px;
	border-bottom: 1px solid #ccc;
	line-height: 25px;
	margin: 20px;
}
.dog_div li{
	font-size: 12px;
	font-weight: normal;
	margin-right: 10px;
	float: left;
}
.dog_div li:first-of-type{
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	text-align: left;
}
.ul_left>li:nth-of-type(2):hover .cat_div{
	display: block;
}
.cat_div{
	width: 620px;
	height: 337.5px;
	background-color: #fff;
	position: absolute;
	top: 0px;
	left: 300px;
	z-index: 3;
	display: none;
	box-shadow: 0px 0px 3px 1px #999;
}
.cat_div>ul{
	width: 580px;
	height: 92.5px;
	border-bottom: 1px solid #ccc;
	line-height: 25px;
	margin: 20px;
}
.cat_div li{
	font-size: 12px;
	font-weight: normal;
	margin-right: 10px;
	float: left;
}
.cat_div li:first-of-type{
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	text-align: left;
}
.ul_left>li:nth-of-type(3):hover .live_div{
	display: block;
}

.live_div{
	width: 620px;
	height: 517.5px;
	background-color: #fff;
	position: absolute;
	top: 0px;
	left: 300px;
	z-index: 3;
	display: none;
	box-shadow: 0px 0px 3px 1px #999;
}
.live_div>ul{
	width: 580px;
	height: 65.5px;
	border-bottom: 1px solid #ccc;
	line-height: 25px;
	margin: 20px;
}
.live_div li{
	float: left;
	font-size: 12px;
	font-weight: normal;
	margin-right: 10px;
}
.live_div li:first-of-type{
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	text-align: left;
}
.ul_left>li:nth-of-type(4):hover .aquarium_div{
	display: block;
}
.aquarium_div{
	width: 620px;
	height: 452px;
	background-color: #fff;
	position: absolute;
	top: 0px;
	left: 300px;
	z-index: 3;
	display: none;
	box-shadow: 0px 0px 3px 1px #999;
}
.aquarium_div>ul{
	width: 580px;
	height: 65.5px;
	border-bottom: 1px solid #ccc;
	line-height: 25px;
	margin: 20px;
}
.aquarium_div li{
	font-size: 12px;
	font-weight: normal;
	margin-right: 10px;
	float: left;
}
.aquarium_div li:first-of-type{
	font-size: 14px;
	font-weight: bold;
	width: 100%;
	text-align: left;
}
.div_img{
	width: 700px;
	height: 500px;
	margin: auto;
	margin-left: 10px;
	overflow: hidden;
	position: relative;
	float: left;
}
.img1{
	width: 700px;
	height: 500px;
	transition:all 0.4s;
}

.left-top ul li:hover{
  background: rgba(0, 0, 0, 0.657);
}
.left_top_a{
	background-color: rgba(0, 0, 0, 0.791);
	color:white;
}
img:hover{
	transition:all 0.4s;
}
.ul_img{
	width: 2800px;
	height: 500px;
	position: absolute;
	left: 0px;
}
.btns{
	position: absolute;
	width: 125px;
	bottom: 10px;
	background-size: 12px;
	left: calc(50% - 62.5px);
}
.ul_img>li,.btns>li{
	float:left;
}
.btns>li{
	margin-left: 5px;
}
button{
	width: 20px;
	height: 20px;
	border-radius: 20px;
	background-color: white;
	opacity: 0.5;
}
.bgGreen{
	background-color: white;
	opacity: 1;
}
.bgGreen:hover{
	opacity: 1;
}
.leftArror{
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 0px 20px 20px 0px;
	background-color: grey;
	text-align: center;
	line-height: 50px;
	top:calc(50% - 20px);
	opacity: 0.2;
}
.leftArror:hover{
	cursor: pointer;
	color: white;
	opacity: 0.5;
}
.rightArror{
	position: absolute;
	width: 50px;
	height: 50px;
	border-radius: 20px 0px 0px 20px;
	background-color: grey;
	text-align: center;
	line-height: 50px;
	top:calc(50% - 20px);
	opacity: 0.2;
	right:0px;
}
.rightArror:hover{
	cursor: pointer;
	color: white;
	opacity: 0.5;
}
.div_right{
	width: 280px;
	height: 500px;
	float: left;
	color:grey;
	margin-left: 10px;
}
.div_right_top{
	float:left;
	width: 280px;
	height: 120px;
	background-color: white;
}
.div_right_bottom{
	float:left;
	width: 280px;
	height: 370px;
	background-color: white;
	margin-top: 10px;
	
}
.head_img{
    float: left;
	width: 70px;
	height: 70px;
  	border-radius: 50%;
  	border: 5px double #f0f0f0;
  	margin: 20px;
	margin-left: 30px;
}
.nickname{
	width:120px;
	height:25px;
	line-height:25px;
	float: left;
    font-size:14px;
    color: grey;
    margin-top: 30px;
    margin-left:10px;
}
.n_name{
	width:120px;
	height:25px;
	line-height:25px;
	float: left;
	font-size:14px;
	color: grey;
	margin-left:10px;
}
.en{
	margin-top: 30px;
}
#exit{
	color: grey;
	float: left;
	margin-left: 10px;
}
.Login_Register{
    margin-left:30px;
	float:left;
	width:100px;
	height:30px;
	line-height:30px;
    font-size:13px;
    color: grey;
    margin-top:-5px;
}
.Login_Register a{
	margin-left: 2px;
	margin-right: 2px;
    color: grey;
}

.service-top{
	height: 60px;
	line-height: 60px;
	font-size: 20px;
	font-weight: bold;
	text-align: center;
  	border-bottom: 2px double #f0f0f0;
}
.service{
	height: 54px;
	line-height: 54px;
	font-size: 12px;
	margin-left: 10px;
  	border-bottom: 1px double #f0f0f0;
}
.h1_recommend{
	width: 1300px;
	height: 70px;
	font-size: 30px;
	text-align: center;
	margin-top: 30px;
	float:left;
}
.div_recommend,.ul_recommend{
	width: 1300px;
    display: inline-block;
	text-align: center;
}
.ul_recommend .li_recommend{
	width: 240px;
	height: 350px;
    /*display: inline-block;*/
	float:left;
	background-color: #fff;
	margin-top: 10px;
	margin-right: 10px;
	transition:all 0.5s linear;
	position: relative;
	bottom: 20px;
}
.li_recommend:hover{
	box-shadow: 0px 0px 1px 1px #ccc;
	transition:all 0.5s linear;
	opacity: 0.8;
}
.li_img{
	width: 200px;
	height: 220px;
	margin-top: 20px;
	margin-bottom: 10px;
	position: relative;
}
.li_p{
	font-size: 12px;
	font-weight: normal;
	margin-left: 20px;
	margin-right: 10px;
	color: grey;
	position: absolute;
	bottom: 50px;
}
.money{
	font-size: 20px;
	color: #b32c0f;
	margin-top:10px;
	text-align: left;
	margin-left:20px;
	font-weight: bold;
	position: absolute;
	bottom: 10px;
	
}
.money sup{
	font-size: 12px;
	color: #b32c0f;
	position: relative;
	top:6px;
	left:2px;
	font-weight: bold;
}
